<template>
  <div>
    <scroller :show-scrollbar="false">

      <vm-cell label="担保公司"
               :placeholder="provider.orgName"
               :hasTopBorder="true">
      </vm-cell>

      <vm-cell label="意向银行"
               @cellClicked="bankShow">
        <text slot="title"
              :class="['select-text', !params.bankName && 'text-muted']">{{params.bankName || '请选择银行'}}</text>
        <text class="icon text-muted">&#xe69b;</text>
      </vm-cell>

      <vm-cell label="申请金额(万元)"
               :label-width="300">
        <input slot="title"
               type="number"
               placeholder="请填写"
               v-model="fundsParams.applyFunds"
               class="input" />
      </vm-cell>

      <vm-cell label="借款年限(年)"
               :label-width="300">
        <input slot="title"
               type="number"
               placeholder="请填写"
               v-model="fundsParams.loadYears"
               class="input" />
      </vm-cell>

      <text class="p-3 text-muted">申请资金用途</text>

      <vm-cell label="固定投入占比(%)"
               :label-width="300"
               :hasTopBorder="true">
        <input slot="title"
               type="number"
               placeholder="请填写"
               v-model="rateParams.solid"
               class="input" />
      </vm-cell>

      <vm-cell label="流动资金占比(%)"
               :label-width="300">
        <input slot="title"
               type="number"
               placeholder="请填写"
               v-model="rateParams.flow"
               class="input" />
      </vm-cell>

      <vm-cell label="人工支出占比(%)"
               :label-width="300">
        <input slot="title"
               type="number"
               placeholder="请填写"
               v-model="rateParams.people"
               class="input" />
      </vm-cell>

      <vm-cell label="原材料采购占比(%)"
               :label-width="300">
        <input slot="title"
               type="number"
               placeholder="请填写"
               v-model="rateParams.material"
               class="input" />
      </vm-cell>

      <vm-cell label="其他占比(%)"
               :label-width="300">
        <input slot="title"
               type="number"
               placeholder="请填写"
               v-model="rateParams.other"
               class="input" />
      </vm-cell>

      <vm-button class="my-3"
                 text="提交"
                 @buttonClicked="goStep3"></vm-button>

    </scroller>

    <vm-mask height="600"
             width="560"
             :show-close="true"
             :show.sync="bankVisible">
      <text class="p-3 border-bottom text-muted">选择意向银行</text>
      <scroller :show-scrollbar="false">
        <text v-for="(bank, index) in banks"
              :key="index"
              :class="['list-text', selectBankIndex === index && 'list-text-active']"
              @click="onSelectBank(bank, index)">{{bank.bank_name}}</text>
      </scroller>
    </vm-mask>

  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import VmCell from '../../components/vm-cell.vue'
import VmMask from '../../components/vm-mask.vue'
import {
  STORAGE_FARM
} from '../../plugins/constant'

export default {
  components: { VmButton, VmCell, VmMask },
  props: {},
  data() {
    return {
      params: {
        id: '',
        farmName: '',
        contact: '',
        mobileNo: '',
        farmAddressCode: '',
        farmType: '',
        registerNo: '',
        orgClass: '',
        enumCategoryId: '',
        businessScope: '',
        bankName: '',
        bankCode: '',
        scale: '',
        uscale: '亩',
        submitType: 3
      },
      fundsParams: {
        applyFunds: '',
        bankName: '',
        bankCode: '',
        fundsUseDir: '',
        loadYears: '',
        serviceId: '',
        submitType: 3
      },
      rateParams: {
        solid: '',
        flow: '',
        people: '',
        material: '',
        other: ''
      },
      related: {},
      provider: {},
      bankVisible: false,
      banks: [],
      selectBankIndex: -1
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getFarmInfo()
  },
  methods: {
    getFarmInfo() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      if (this.farm.id) {
        this.getParams()
      }
    },
    getParams() {
      this.$router.getParams().then(res => {
        this.related = res && res.related || {}
        this.provider = res && res.provider || {}
        this.setData()
      })
    },
    setData() {
      if (this.related.customer_related_id) {
        this.params.id = this.farm.id
        this.params.farmName = this.related.farm_name
        this.params.contact = this.related.contact_person
        this.params.mobileNo = this.related.mobile_no
        this.params.registerNo = this.related.register_no
        this.params.orgClass = this.related.org_class
        this.params.farmAddressCode = this.related.address_code
        this.params.bankCode = this.related.bank_code
        this.params.bankName = this.related.bank_name
        this.params.farmType = this.related.farm_type

        this.fundsParams.bankCode = this.related.bank_code
        this.fundsParams.bankName = this.related.bank_name
        this.fundsParams.applyFunds = this.related.apply_funds
        this.fundsParams.serviceId = this.provider.orgId
        this.fundsParams.fundsUseDir = this.related.funds_use_dir
        this.fundsParams.loadYears = this.related.load_years

        if (this.fundsParams.fundsUseDir) {
          const { solid, flow, people, material, other } = this.string2UseDir(this.fundsParams.fundsUseDir)
          this.rateParams.solid = solid
          this.rateParams.flow = flow
          this.rateParams.people = people
          this.rateParams.material = material
          this.rateParams.other = other
        }
      } else {
        this.params.id = this.farm.id
        this.params.farmName = this.farm.farmName
        this.params.contact = this.farm.contact
        this.params.mobileNo = this.farm.mobileNo
        this.params.registerNo = this.farm.registerNo
        this.params.orgClass = this.farm.orgClass
        this.params.farmAddressCode = this.farm.farmAddressCode
        this.params.farmType = this.farm.farmType

        this.fundsParams.serviceId = this.provider.orgId
      }
      this.getBank()

    },
    goStep3() {
      if (!this.fundsParams.bankCode) {
        return this.$notice.toast({ message: '请选择贷款银行' })
      }
      if (!this.fundsParams.applyFunds) {
        return this.$notice.toast({ message: '请输入申请金额' })
      }
      const funds = +this.fundsParams.applyFunds || 0
      if (funds < 10 || funds > 300) {
        return this.$notice.toast({ message: '申请金额应在10~300万之间' })
      }
      this.fundsParams.fundsUseDir = this.useDir2String()
      //
      this.sumbit()
    },
    useDir2String() {
      let res = []
      this.rateParams.solid && res.push(`固定投入占比：${this.rateParams.solid}%`)
      this.rateParams.flow && res.push(`流动资金占比：${this.rateParams.flow}%`)
      this.rateParams.people && res.push(`人工支出占比：${this.rateParams.people}%`)
      this.rateParams.material && res.push(`原材料采购占比：${this.rateParams.material}%`)
      this.rateParams.other && res.push(`其他占比：${this.rateParams.other}%`)
      return res.join('，')
    },
    string2UseDir(str) {
      const solidMatch = str.match(/固定投入占比[:|：](\d+)%/)
      const flowMatch = str.match(/流动资金占比[:|：](\d+)%/)
      const peopleMatch = str.match(/人工支出占比[:|：](\d+)%/)
      const materialMatch = str.match(/原材料采购占比[:|：](\d+)%/)
      const otherMatch = str.match(/其他占比[:|：](\d+)%/)
      return {
        solid: this.getMatch(solidMatch),
        flow: this.getMatch(flowMatch),
        people: this.getMatch(peopleMatch),
        material: this.getMatch(materialMatch),
        other: this.getMatch(otherMatch),
      }
    },
    getMatch(ma) {
      return ma ? (ma[1] || '') : ''
    },
    // 意向银行
    async getBank() {
      const res = await this.$api.getData({
        server: 'credit',
        table: 'bank_enum'
      })
      this.banks = res || []
      if (!this.fundsParams.bankCode) {
        return
      }
      for (let i = 0; i < this.banks.length; i++) {
        if (bank.bank_code === this.fundsParams.bankCode) {
          this.selectBankIndex = i
          break
        }
      }
    },
    bankShow() {
      this.bankVisible = true
    },
    onSelectBank(bank, index) {
      this.selectBankIndex = index
      this.params.bankCode = bank.bank_code
      this.params.bankName = bank.bank_name
      this.fundsParams.bankCode = bank.bank_code
      this.fundsParams.bankName = bank.bank_name
      this.bankVisible = false
    },
    sumbit() {
      if (this.related.customer_related_id) {
        this.updateData()
      } else {
        this.addData()
      }
    },
    addData() {
      this.$http({
        method: 'POST',
        name: 'industrial.farm.apply',
        data: {
          ...this.params,
          farmApplyFunds: this.fundsParams
        },
        errorMsg: '提交失败，请重试'
      }).then(res => {
        this.$notice.toast({ message: '恭喜，您已申请贷款成功，请耐心等待农担公司进行审核！' })
        this.$router.setBackParams({ type: 1 })
        this.$router.back()
      })
    },
    updateData() {
      this.$http({
        method: 'PUT',
        name: 'industrial.farm.apply',
        data: {
          ...this.params,
          farmApplyFunds: this.fundsParams
        },
        errorMsg: '提交失败，请重试'
      }).then(res => {
        this.$notice.toast({ message: '贷款提交成功！' })
        this.$router.setBackParams({ type: 1 })
        this.$router.back()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.input {
  flex: 1;
  height: 60px;
  font-size: 30px;
  tint-color: #999;
  text-align: right;
}
.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.text-center {
  text-align: center;
}
.text-muted {
  color: #999;
}
.text-primary {
  color: $primary;
}
.p-3 {
  padding: 30px;
}
.mt-3 {
  margin-top: 30px;
}
.my-3 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.bg-white {
  background-color: #fff;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.align-center {
  align-items: center;
}

.select-text {
  flex: 1;
  text-align: right;
}
.list-text {
  padding: 30px;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.list-text-active {
  color: $primary;
}
.check-icon {
  font-size: 32px;
  margin-right: 15px;
}
</style>
